<script setup>

const props = defineProps({
    actions: {
        type: Array,
        default: () => ['copy', 'delete', 'refresh']
    }
})
const emit = defineEmits(['action'])

const emitEvent = (event) => {
    emit('action', {action: event})
}
</script>

<template>
    <div class="chat-box-action">
        <div class="chat-box-action-button" v-if="props.actions.includes('copy')" @click.stop="emitEvent('copy')">
            <el-icon>
                <CopyDocument/>
            </el-icon>
        </div>
        <div class="chat-box-action-button" v-if="props.actions.includes('delete')" @click.stop="emitEvent('delete')">
            <el-icon>
                <Delete/>
            </el-icon>
        </div>
    </div>
</template>

<style scoped lang="scss">
.chat-box-action {
    display: flex;
    flex-direction: row;
    margin-top: 5px;

    &-button {
        margin: 3px 8px;
        cursor: pointer;
        transition: all .1s ease-in-out;
        font-size: var(--chat-box-action-size);
        color: var(--chat-box-action-color);

        &:hover {
            transform: scale(1.1);
            transform-origin: center;
            color: var(--chat-box-action-hover-color)
        }
    }
}
</style>